import { useNavigate } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import { UserContext } from "../context/userContext";
import axios from "axios";
import {Button, Form, List, Space, TextArea} from "antd-mobile";

const UserProfile = () => {
  const [technique, setTechnique] = useState('');
  const [experience, setExperience] = useState('');
  const [error, setError] = useState('');

  const navigate = useNavigate();
  const { currentUser } = useContext(UserContext);
  const token = currentUser?.token;

  const cancel = () => {
    navigate(-1);
  }

  useEffect(() => {
    if (!token) {
      navigate('/login');
    }
  }, [token, navigate]);

  useEffect(() => {
    const getUser = async () => {
      if (!currentUser?.id) return;
      try {
        const response = await axios.get(
          `${process.env.REACT_APP_BASE_URL}/users/${currentUser.id}`,
          { withCredentials: true, headers: { Authorization: `Bearer ${token}` } }
        );

        const { technique, experience } = response.data;
        setTechnique(technique);
        setExperience(experience);
      } catch (error) {
        console.log(error);
      }
    };

    getUser();
  }, [currentUser?.id, token]);

  const updateUserDetails = async (e) => {
    e.preventDefault();

    try {
      const userData = { technique, experience };

      const response = await axios.patch(
        `${process.env.REACT_APP_BASE_URL}/users/edit-info`,
        userData,
        { withCredentials: true, headers: { Authorization: `Bearer ${token}` } }
      );

      if (response.status === 200) {
        navigate(-1);
      }
    } catch (error) {
      setError(error.response.data.message);
    }
  };

  return (
    <section className="profile">

      <Form
          layout='horizontal'
          footer={
            <Space block direction="horizontal" justify='around'  wrap >
              <Button onClick={cancel} style={{'--background-color': 'rgba(80, 62, 157, 0.1)', '--text-color':'rgba(80, 62, 157, 1)', '--border-style':'none', 'width':'120px'}} block type='cancel' color='primary' size='large'>
                取消
              </Button>
              <Button onClick={updateUserDetails} style={{'--background-color': 'rgba(80, 62, 157, 1)', '--text-color':'white', '--border-style':'none', 'width':'190px'}} block type='submit' color='primary' size='large'>
                保存
              </Button>
            </Space>
          }
      >
        <Form.Header>擅长技能</Form.Header>
          <List.Item>
            <TextArea
                placeholder='详细描述擅长的技能便于更好了解您'
                rows={10}
                value={technique}
                onChange={val => {
                  setTechnique(val)
                }}
            />
          </List.Item>

        <Form.Header>项目经验</Form.Header>

          <List.Item>
            <TextArea
                placeholder='详细描述您参与过的项目经验便于更好了解您'
                rows={10}
                value={experience}
                onChange={val => {
                  setExperience(val)
                }}
            />
          </List.Item>

      </Form>

    </section>
  );
};

export default UserProfile;


